/* 浏览器CSS样式初始化 - 重置所有元素的默认样式 */
*, *::before, *::after {
  box-sizing: border-box; /* 统一盒模型 */
  margin: 0;
  padding: 0;
}

/* 使用Normalize.css来规范化浏览器默认样式的差异 */
html {
  line-height: 1.15; /* 修正所有浏览器中的行高 */
  -webkit-text-size-adjust: 100%; /* 防止在iOS中字体大小在横竖屏切换时调整 */
}

body {
  margin: 0; /* 重置body的默认外边距 */
  font-family: 
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif; /* 设置一个通用的字体族 */
  font-size: 15px; /* 设置基础字体大小 */
  line-height: 1.6; /* 设置行高 */
  text-rendering: optimizeLegibility; /* 提高文字渲染质量 */
  -webkit-font-smoothing: antialiased; /* 抗锯齿渲染 */
  -moz-osx-font-smoothing: grayscale; /* 灰度抗锯齿渲染 */
}

/* 为链接去除默认的背景色 */
a {
  background-color: transparent; /* 去除IE 10中活动链接的灰色背景 */
}

/* 去除图片链接中的边框 */
img {
  border-style: none; /* 去除IE 10中图片链接的边框 */
}

/* 清除浮动 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
/* \* Hide from IE Mac \*/
.clearfix {
  display: block;
}
/* End hide from IE Mac */

/* 浏览器私有属性 - 处理CSS属性的浏览器前缀问题 */
/* 例如，为border-radius添加浏览器前缀 */
.my-element {
  -webkit-border-radius: 5px; /* Safari 和 Chrome */
  -moz-border-radius: 5px; /* Firefox */
  -ms-border-radius: 5px; /* Internet Explorer */
  border-radius: 5px; /* 标准语法 */
}

/* 针对不同浏览器的hack */
/* IE6专用 */
* html .my-element {
  width: 100px;
}

/* IE7专用 */
*+html .my-element {
  width: 100px;
}

/* Firefox和IE7共用 */
.my-element {
  width: 100px !important;
}